<template>
  <el-menu
    class="el-menu-vertical-demo"
    background-color="#ff674b"
    text-color="#fff"
    active-text-color="#fff"
    router
    unique-opened
    :default-active="$route.path"
  >
    <el-menu-item index="/home">
      <i class="el-icon-s-home" style="color: #fff"></i>
      <span slot="title">管理中心</span>
    </el-menu-item>

    <el-submenu :index="item.id+''" v-for="item in menus" :key="item.id">
      <template slot="title">
        <i class="el-icon-setting" style="color: #fff"></i>
        <span>{{item.title}}</span>
      </template>
      <el-menu-item :class="{'is-active':$route.path===val.url}" :index="val.url" v-for="val in item.children" :key="val.id">{{val.title}}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
// 导入辅助函数
import { getLoginInfo } from '../utlis/common';
export default {
    created(){
        const {menus}=getLoginInfo();
        this.menus=menus;
    },
    data(){
        return {
            // 导航菜单数组
            menus:[]
        }
    }
};
</script>

<style>
/* 导航菜单高亮选择器 */
.el-menu li.is-active{
  background: rgba(0,0,0,.2)!important;
  color:#FFF!important;
}
</style>